<template>
	<view class="cont">
		<view class="cont-navbar">
			<u-navbar :is-back="false" :border-bottom="false" :background="background">
				<view class="slot-wrap u-col-center u-flex-1 u-flex u-p-l-24 u-p-r-24">
					<view class="u-flex-1 u-p-r-20">
						<u-search 
							shape="round" 
							bg-color="transparent"
							border-color="#e2e2e2"
							placeholder="输入关键字" 
							:show-action="false"
							:action-style="{width: '90rpx',fontSize: '28rpx'}"
							v-model="keyword"
							@search="onSearch"
							@custom="onSearch"></u-search>
					</view>
					<view class="relative" @click="showArea = true">
						<view>选择地区</view>
					</view>
				</view>
			</u-navbar>
		</view>
		
		<view class="cont-list u-p-24">
			<itemGoods :list="list" />
			
			<!-- 数据为空 -->
			<empty
				:show="nodata"
				marginTop="100"
				text="还没有商品哦~"
				src="https://h5.dhcc.wang/images/O2Oplus/default_goods.png" />
			
			<!-- 加载更多 -->
			<u-loadmore
				v-if="!nodata"
				:status="loadstatus" 
				margin-top="30"
				margin-bottom="20"
				bg-color="#f8f8f8"/>
		</view>
		
		<u-picker 
			v-model="showArea" 
			mode="region" 
			:area-code="areaCode"
			@confirm="confirm"></u-picker>
		
		<u-back-top 
			:scroll-top="scrollTop" 
			:icon-style="{fontSize: '36rpx',color: infoColorError}"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			
			// 导航栏---------------
			scrollTop: 0,
			background: {
				backgroundColor: '#ffffff',
			},
			
			keyword: '',
			showArea: false,
			regin: {},
			areaCode: [],
			
			nodata: false,
			page: 1,
			pageSize: 10,
			loadstatus: 'loading', // 加载前值为loadmore，加载中为loading，没有数据为nomore
			list: []
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(query) {
		this.init()
	},
	onReady() {
		// 是否登录
		uni.$on(this.ENUM.EVENT_LOGIN_KEY, () => {
			this.getStorage()
		})
	},
	onUnload() {
		uni.$off(this.ENUM.EVENT_LOGIN_KEY)
	},
	onReachBottom() {
		if (this.loadstatus == 'nomore') return
		this.getList()
	},
	methods: {
		init() {
			this.getStorage()
			this.getList(true)
		},
		
		getStorage() {
			// uni.hideShareMenu()
		},
		
		getList(init = false) {
			this.loadstatus = 'loading'
			if (init) {
				this.page = 1
				this.nodata = false
			}
			// this.$api.getDemo({
			// 	page: this.page,
			// 	pageSize: this.pageSize
			// }, init).then(res => {
			// 	// 11111
			// })
			setTimeout(() => {
				if (init) this.list = []
				let list = [
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					}
				]
				// this.list.length && list.length < this.pageSize // loadstatus条件
				this.loadstatus = (this.list.length === 30) ? 'nomore' : 'loadmore'
				this.list = [...this.list, ...list]
				
				this.page++
				this.nodata = this.list.length === 0
				uni.stopPullDownRefresh()
			}, 1000)
		},
		
		onSearch() {
		},
		
		confirm(data) {
			this.regin = data
			this.areaCode = [
				data.province.value,
				data.city.value,
				data.area.value
			]
		},
		
		openPage(url) {
			this.$common.openPage(url)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-wrap {
	background-color: transparent;
}

.cont {
	overflow-x: hidden;
	min-height: 100vh;
	padding-bottom: calc(var(--window-bottom) + 10px);
}
.item {
	&-content {
		line-height: 48rpx;
	}
	.u-btn {
		width: 130rpx;
	}
}
</style>
